<template>
  <div class="singer" v-loading="loading">
    <indexList :data='singers' @select="selectSinger"/>
    <!-- <router-view :singer="selectedSinger"></router-view> -->
    <router-view v-slot="{Component}">
      <transition name="slide">
        <component :is="Component" :data="selectSinger"/>
      </transition>
    </router-view>
  </div>
</template>

<script>
import indexList from '../components/base/index-list/index-list.vue'
import { getSingerList } from '@/service/singer'

export default {
    name: 'singer',
    components: {
      indexList
    },
    data () {
      return {
        singers: [],
        selectedSinger: null,
        loading: false
      }
    },
    async mounted () {
      try {
        if (!this.$route.params.id) {
          this.loading = true
        } else {
          this.loading = false
        }
        const res = await getSingerList()
        this.singers = res.singers
      } catch (err) {
        console.error(err)
      } finally {
        this.loading = false
      }
    },
    methods: {
      selectSinger(val) {
        this.selectedSinger = val
        sessionStorage.setItem('singer', JSON.stringify(val))
        this.$router.push({
          path: `/singer/${val.mid}`
        })
      }
    }
}
</script>

<style>
 .singer {
   position: fixed;
   width: 100%;
   top: 88px;
   bottom: 0;
 }
</style>
